<script setup lang="ts">
  import { computed, PropType, ref } from 'vue'
  import UpdateEndOrderTypeModal from './update-end-order-type-modal.vue'

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  /**
   * 百事字段渲染文本
   */
  const baishiFieldRenderData = computed(() => {
    try {
      return JSON.parse(props.orderDetail.thirdExtraContentJson)
    } catch (error) {
      return null
    }
  })

  // 更新完工类型弹窗显示状态
  const updateEndOrderTypeModalVisble = ref(false)
</script>

<template>
  <div class="order-detail-baishi-info">
    <div class="title">百事工单信息</div>
    <div class="info">
      <!-- 工单号(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">工单号(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ orderDetail.otherOrderNo || '' }}</div>
      </div>

      <!-- 百事工单状态 -->
      <div class="info_item">
        <div class="label">
          <div class="txt">百事工单状态</div>
          <div class="middle">:</div>
        </div>
        <div
          :class="{
            value: true,
            'font-red-bold': baishiFieldRenderData.baiShiFinishOrderCheckResult === 2,
          }"
        >
          {{ baishiFieldRenderData.hck_wbstatus || '' }}
        </div>
      </div>

      <!-- 百事完工类型 -->
      <div class="info_item">
        <div class="label">
          <div class="txt">百事完工类型</div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          <h-link
            v-if="!baishiFieldRenderData.hck_finishtype"
            @click="updateEndOrderTypeModalVisble = true"
            >修改</h-link
          >
          <h-link
            v-else-if="baishiFieldRenderData.baiShiFinishOrderCheckResult === 2"
            @click="updateEndOrderTypeModalVisble = true"
            >{{ baishiFieldRenderData.hck_finishtype }}</h-link
          >
          <template v-else>{{ baishiFieldRenderData.hck_finishtype }}</template>
        </div>
      </div>

      <!-- Siebel工单号(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">Siebel工单号(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_siebel || '' }}</div>
      </div>

      <!-- 工单类型(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">工单类型(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_wbtype || '' }}</div>
      </div>

      <!-- 最近同步时间(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">最近同步时间(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.latestSyncTime || '' }}</div>
      </div>

      <!-- 厂商(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">厂商(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_vendorid || '' }}</div>
      </div>

      <!-- 维修类别(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">维修类别(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_repairtype || '' }}</div>
      </div>

      <!-- 完工时间(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">完工时间(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.sysCompletionTime || '' }}</div>
      </div>

      <!-- 品牌(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">品牌(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_brandlistid || '' }}</div>
      </div>

      <!-- 同步状态(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">同步状态(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          {{ baishiFieldRenderData.status ? '已同步' : '未同步' }}
        </div>
      </div>

      <!-- 需要完工的时间(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">需要完工时间(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.shouldfinishtime || '' }}</div>
      </div>

      <!-- 业务代理电话(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">业务代理电话(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_ydphone || '' }}</div>
      </div>

      <!-- 报废类型(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">报废类型(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ '' }}</div>
      </div>

      <!-- 验收日期(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">验收日期(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.appdate || '' }}</div>
      </div>

      <!-- 业务代理姓名(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">业务代理姓名(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_ydname || '' }}</div>
      </div>

      <!-- 线上完工类型(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">线上完工类型(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ '' }}</div>
      </div>

      <!-- 行销公司(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">行销公司(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_salescompany || '' }}</div>
      </div>

      <!-- 工单负责人(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">工单负责人(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_wbadmin || '' }}</div>
      </div>

      <!-- 保修次数(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">保修次数(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_repaircount || '0' }}</div>
      </div>

      <!-- 营业部(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">营业部(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_salesoffice || '' }}</div>
      </div>

      <!-- 结算费用(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">结算费用(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          <template v-if="Number(baishiFieldRenderData.hck_settlefee)">
            {{ Number(baishiFieldRenderData.hck_settlefee).toFixed(2) }}
          </template>
          <template v-else>0.00</template>
        </div>
      </div>

      <!-- 工单项目(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">工单项目(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_wbItem || '' }}</div>
      </div>

      <!-- 工单区县(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">工单区县(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_bscounty || '' }}</div>
      </div>

      <!-- 工单费用(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">工单费用(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          <template v-if="Number(baishiFieldRenderData.hck_fee)">
            {{ Number(baishiFieldRenderData.hck_fee).toFixed(2) }}
          </template>
          <template v-else>0.00</template>
        </div>
      </div>

      <!-- 资产条码(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">资产条码(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_barcode || '' }}</div>
      </div>

      <!-- 目的地名称(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">目的地名称(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_destname || '' }}</div>
      </div>

      <!-- 逾期罚款(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">逾期罚款(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          <template v-if="Number(baishiFieldRenderData.hck_penalty)">
            {{ Number(baishiFieldRenderData.hck_penalty).toFixed(2) }}
          </template>
          <template v-else>0.00</template>
        </div>
      </div>

      <!-- 产品规格(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">产品规格(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.hck_standards || '' }}</div>
      </div>

      <!-- 维修地址(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">维修地址(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          <h-tooltip-text
            :text="baishiFieldRenderData.hck_repairAddress || ''"
            :height="16"
            :max-width="400"
          />
        </div>
      </div>

      <!-- 驳回原因(百事) -->
      <div class="info_item">
        <div class="label">
          <div class="txt">驳回原因(百事)</div>
          <div class="middle">:</div>
        </div>
        <div class="value">{{ baishiFieldRenderData.reasonForRejection || '' }}</div>
      </div>

      <!-- 完工类型 -->
      <div
        v-if="
          ['在线完工申请', '销单申请', '建议废弃'].includes(baishiFieldRenderData.hck_finishtype)
        "
        class="info_item"
      >
        <div class="label">
          <div class="txt">
            <template v-if="baishiFieldRenderData.hck_finishtype === '在线完工申请'"
              >线上完工类型</template
            >
            <template v-if="baishiFieldRenderData.hck_finishtype === '销单申请'">销单原因</template>
            <template v-if="baishiFieldRenderData.hck_finishtype === '建议废弃'"
              >建议报废原因</template
            >
          </div>
          <div class="middle">:</div>
        </div>
        <div class="value">
          {{
            `${baishiFieldRenderData.hck_finishtype_name || ''}/${
              baishiFieldRenderData.hck_finishtype_code || ''
            }` || ''
          }}
        </div>
      </div>
    </div>

    <update-end-order-type-modal
      v-model="updateEndOrderTypeModalVisble"
      :order-id="props.orderDetail.id"
      :hck-wbtype="baishiFieldRenderData.hck_wbtype || ''"
      @update="emits('update')"
    />
  </div>
</template>

<style scoped lang="scss">
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }

  .order-detail-baishi-info {
    background-color: #fff;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }

    .info {
      display: grid;
      grid-template-columns: repeat(3, 400px);
      padding-left: 9px;
      row-gap: 12px;
      column-gap: 24px;

      .info_item {
        display: flex;
        column-gap: 5px;

        .label {
          display: flex;
          color: #606266;
          white-space: nowrap;
        }

        .value {
          height: fit-content;
          display: flex;
          align-items: center;
        }

        .font-red-bold {
          color: #f56c6c;
          font-weight: bold;
        }
      }
    }
  }

  :deep(.h_link.primary) {
    font-weight: bold;
    font-family: '黑体';
    // font-size: 16px !important;
  }
</style>
